<template>
  <div>
    <div
      class="interactive"
      v-if="notice.reason != '' && roomStore.state.users.length <= 1"
      @click="handleApply()"
    ></div>
    <div
      v-if="+roomStore.state.me.role === 2"
      class="edu-icon-dianhua"
      :class="[studentIsHost ? 'red' : 'green']"
      @click="handleHands()"
    ></div>
  </div>
</template>

<script>
import { roomStore } from '../utils/room'
import { globalStore } from '../utils/global'
import { eduApi } from '../utils/edu-api'
import { t } from '../i18n/i18n'
export default {
  data() {
    return {
      roomStore: roomStore,
      globalStore: globalStore,
      handsType: 'hands_up',
      classType: globalStore.state.coVideo
    }
  },
  computed: {
    notice() {
      return this.globalStore.state.notice
    },
    studentIsHost() {
      if (
        this.$route.path.match(/big-class/) &&
        this.roomStore.state.me.role === 2 &&
        this.roomStore.state.me.coVideo
      ) {
        return true
      }
      return false
    }
  },
  /* watch: {
    'roomStore.state.me.coVideo': {
      deep: true,
      handler: function(n, o) {
        this.classType = n
        this.handsType = n ? 'hands_up' : 'hands_up_end'
      }
    }
  }, */
  methods: {
    // 用户发起举手
    handleHands(type) {
      if (!this.studentIsHost) {
        if (this.roomStore.state.course.teacherId) {
          eduApi
            .studentSendApply(this.roomStore.state.course.roomId)
            .then(resp => {
              const data = resp
              console.log('hands_up fulfilled', data)
            })
            .catch(err => {
              console.warn(err)
            })
        }
      }
      if (this.studentIsHost) {
        eduApi
          .studentStopCoVideo(this.roomStore.state.course.roomId)
          .then(data => {
            globalStore.showToast({
              type: 'close_youself_co_video',
              message: t('toast.close_youself_co_video')
            })
            globalStore.showVideo(true)
          })
          .catch(err => {
            console.warn(err)
          })
      }
    },
    handleApply() {
      this.$messageBox
        .confirm(globalStore.state.notice.text)
        .then(() => {
          // 老师同意学生连麦申请
          eduApi
            .teacherAcceptApply(roomStore.state.course.roomId, roomStore.state.applyUser.userId)
            .then(() => {
              this.handsType = 'hands_up_end'
              globalStore.showToast({
                type: 'peer_hands_up',
                message: t('toast.accept_co_video')
              })
              globalStore.removeNotice()
              globalStore.removeDialog()
            })
            .catch(err => {
              console.warn(err)
            })
        })
        .catch(() => {
          // 教师取消学生申请
          eduApi
            .teacherRejectApply(
              this.roomStore.state.course.roomId,
              this.roomStore.state.applyUser.userId
            )
            .then(() => {
              this.handsType = 'hands_up'
              globalStore.showToast({
                type: 'peer_hands_up',
                message: t('toast.reject_co_video')
              })
              globalStore.removeNotice()
              globalStore.removeDialog()
            })
            .catch(err => {
              console.warn(err)
            })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.interactive {
  width: 56px;
  height: 56px;
  cursor: pointer;
  background-image: url(~@assets/images/public/live_handup.png);
  background-size: 56px 56px;
}
.edu-icon-dianhua {
  cursor: pointer;
  width: 32px;
  height: 32px;

  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  &.green {
    background-color: #67c23a;
  }
  &.red {
    background-color: #f54030;
  }
}
</style>
